本文主要说React Native 入门的一些东西，帮助新手快速入门

React Native 入门

一. 背景

为什么需要React-Native？

在React-Native出现之前移动端主流的开发模式是原生开发和Hybrid开发（H5混合原生开发），Hybrid app相较于native app的优势是开发成本低开发速度快(H5页面开发跨平台，无需重新写web、android、ios代码)，尽管native app在开发上需要更多时间，但却带来了更好的用户体验(页面渲染、手势操作的流畅性)，也正是基于这两点Facebook在2015年推出了React-Native

React-Native的开发既保留了React的开发效率又拥有媲美原生的用户体验，其运行原理并非使用webview所以不属于Hybrid开发，想了解的可以查看React Native运行原理解析这篇文章。React-Native提出的理念是‘learn once，write every where’，之所以不是‘learn once, run every where’，是因为不同平台的用户体验有所不同，因此要运行全平台仍需要一些额外的适配

二. 搭建环境

更多更详细搭建流程 https://reactnative.cn/docs/getting-started.html

安装依赖

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

1.Node, Watchman

我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装：

1 2	brew install node brew install watchman

Node，需要在 v8.3 以上

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

2.Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务

1	npm install -g yarn react-native-cli

3.JDK、Android Studio的安装

略

4.创建新项目

使用 React Native 命令行工具来创建一个名为”AwesomeProject”的新项目：

1	react-native init AwesomeProject

提示：你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp –version 0.44.3。注意版本号必须精确到两个小数点。

三.编译并运行 React Native 应用

1.启动项目

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行
react-native run-android：

1
2
3

cd AwesomeProject

react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

2.修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的文本编辑器打开App.js并随便改上几行
按两下 R 键，或是用 Menu 键（通常是 F2，在 Genymotion 模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。

四.集成RN到现有的应用

集成方式 https://reactnative.cn/docs/integration-with-existing-apps/

五.基本的JSX和ES6语法

先看一下运行成功后的界面代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//noinspection BadExpressionStatementJS
type
Props = {};
//noinspection JSAnnotator
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

代码中出现的

1
2
3

````<Text style={styles.welcome}>Welcome to React Native!</Text>```这段代码是JSX语法使用方式，和html标记语言一样，只不过这里引用的是React-Native的组件，Text是一个显示文本的组件，可以看到```style={styles.welcome}```这是JSX的另一个语法可以将有效的js表示式放入大括号内，Welcome to React Native!为其内容文本.
## 六.组件的属性和状态
在了解了一些基本的JSX和ES6语法后，我们还需要了解两个比较重要的概念即```props```和```state

## 七.组件生命周期
![image](https://upload-images.jianshu.io/upload_images/11716283-7bb3a070d2406452.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/740)

组件的生命周期会经历三个阶段

Mounting:挂载
Updating:更新
Unmounting:移除

1	对应的生命周期回调方法为

componentWillMount()//组件将要挂载时调用
render()//组件渲染时调用
componentDidMount()//组件挂载完成时调用
componentWillReceiveProps(object nextProps)//组件props和state改变时调用
shouldComponentUpdate(object nextProps,object nextState)//返回false不更新组件，一下两个方法不执行
componentWillUpdate(object nextProps,object nextState)//组件将要更新时调用
componentDidUpdate(object nextProps,object nextState)//组件完成更新时调用
componentWillUnmount()//组件销毁时调用


这里我们需要重点关注的地方在于组件运行的阶段，组件每一次状态收到更新都会调用  ```render()```方法，除非```shouldComponentUpdate```方法返回```false```，可以通过此方法对组件做一些优化避免重复渲染带来的性能消耗。
## 八.样式

React-Native样式实现了CSS的一个子集，样式的属性与CSS稍有不同，其命名采用驼峰命名，对前端开发者来说基本没差。使用方式也很简单，首先使用StyleSheet创建一个styles

const styles = StyleSheet.create({
container:{
flex:1
}
})

1 2	然后将对应的style传给组件的style属性，例如```<View style={styles.container}/>

九.常用组件

在日常开发中最常使用的组件莫过于


- ```View```基本上作为容器布局，在里面可以放置各种各样的控件，一般只需要为其设置一个style属性即可，常用的样式属性有flex,width,height,backgroundColor,flexDirector,margin,padding更多可以查看[Layout Props](https://facebook.github.io/react-native/docs/layout-props.html#docsNav)。

- ```Text```是一个显示文本的控件，只需要在组件的内容区填写文字内容即可，例如```<Text>Hello world</Text>```,可以为设置字体大小和颜色
```<Text style={fontSize:14,color:'red'}>Hello world</Text>```,同时也支持嵌套Text，例如

<Text style={fontWeight: ‘bold’}>
I am bold
<Text style={color: ‘red’}>
and red

1	- ```TextInput```是文本输入框控件，其使用方式也很简单

console.log(text)}
/>

1
2

```style```设置了他的样式，```onChangeText```传入一个方法，该方法会在输入框文字发生变化时调用，这里我们使用```console.log(text)```打印输入框的文字。
- ```Image```是一个图片控件，几乎所有的app都会使用图片作为他们的个性化展示，Image可以加载本地和网络上的图片，当加载网络图片时必须设定控件的大小，否则图片将无法展示

//加载本地图片,图片地址为相对地址

<Image style={width:100,height:100} source={require(‘../images/img001.png’)}/>
//加载网络图片

React Native 入门

React Native 入门

一. 背景

为什么需要React-Native？

二. 搭建环境

安装依赖

1.Node, Watchman

2.Yarn、React Native 的命令行工具（react-native-cli）

3.JDK、Android Studio的安装

4.创建新项目

三.编译并运行 React Native 应用

1.启动项目

2.修改项目

四.集成RN到现有的应用

五.基本的JSX和ES6语法

九.常用组件

🙏感谢支持🙏